<template>
	<view>
		<view class="tab-box">
			<u-tabs name="cate_name" bar-width='180' count="cate_count" :list="list" :is-scroll="true"
				:current="current" @change="change"></u-tabs>
		</view>
		<view class="main" v-if="indexNum==0">
			<view class="rotate">
				<u-loading mode="flower" :show="rotatmain"></u-loading>
			</view>
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightFirst" :key="index">
					<view class="text-train">
						<!-- {{item.num}} -->
						{{item.trainNo+"("+item.trainModel.code+")"}}
					</view>
					<view class="del" @click="delFirst(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==1">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightSecond" :key="index">
					<view class="text-train">
						{{item.trainNo+"("+item.trainModel.code+")"}}
					</view>
					<view class="del" @click="delSecond(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==2">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightThird" :key="index">
					<view class="text-train">
						{{item.trainNo+"("+item.trainModel.code+")"}}
					</view>
					<view class="del" @click="delThird(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==3">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightFourth" :key="index">
					<view class="text-train">
						{{item.num}}
					</view>
					<view class="del" @click="delFourth(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>{{item.del}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==4">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightFifth" :key="index">
					<view class="text-train">
						{{item.num}}
					</view>
					<view class="del" @click="delFifth(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>{{item.del}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==5">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightSixth" :key="index">
					<view class="text-train">
						{{item.num}}
					</view>
					<view class="del" @click="delSixth(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>{{item.del}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main" v-if="indexNum==6">
			<view class="main-box">
				<view class="main-box-text" v-for="(item,index) in listRightSeventh" :key="index">
					<view class="text-train">
						{{item.num}}
					</view>
					<view class="del" @click="delSeventh(item)">
						<view>
							<u-icon name="trash-fill"></u-icon>
						</view>
						<view>{{item.del}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 线条 -->
		<!-- <view class="line-box">
			<view class="west">
				<view>西</view>
				<view><u-icon name="arrow-up" ></u-icon></view>
			</view>
			<u-line color="#aaa" direction="col" length="310" />
			<view class="east">
				<view><u-icon name="arrow-down" ></u-icon></view>
				<view>东</view>
			</view>
		</view> -->
		<!-- +球 -->
		<view class="add-ball" @click="showSerachLeft">
			<u-icon name="plus" class='add'></u-icon>
		</view>
		<!-- 点击球 -->
		<view class="">
			<u-popup mode="bottom" v-model="showSearchLeft" border-radius="30">
				<view class="bottom-title">
					<view @click="showSearchLeft = false;">取消</view>
					<view v-if="indexNum==0" class="weight">制组交验1</view>
					<view v-if="indexNum==1" class="weight">制组交验2</view>
					<view v-if="indexNum==2" class="weight">制组交验3</view>
					<!-- <view v-if="indexNum==3" class="weight">制组交验4</view>
						<view v-if="indexNum==4" class="weight">制组交验5</view>
						<view v-if="indexNum==5" class="weight">制组交验6</view> -->
					<view v-if="indexNum==3" class="weight">缓存线</view>
					<view @click="goMain">确定</view>
				</view>
				<view class="bottom-search-box">
					<view>
						<u-search placeholder="搜索" v-model="keywordLeft" @change="search" :show-action="false">
						</u-search>
					</view>
				</view>
				<h4>注：黄色为无转向架库存</h4>
				<view class="rotate">
					<u-loading mode="flower" :show="rotatLeft"></u-loading>
				</view>
				<view class="content">
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<ul class="num-ul-left">
								<li class="num-li-left" v-for="(item,index) in search()" :key="index"
									@click="changeBlue(item,index)"
									:class="[item.show==true?'ball-bule':'',item.hasCarBogie?'':'missing-bogie']">
									{{item.num}}
								</li>
							</ul>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		ProcessBrakeAssemblyApi
	} from "./api/index.js"
	import axios from "axios"
	export default {
		data() {
			return {
				rotatLeft: true, //模态框加载状态
				rotatmain: true,//列表加载状态
				list: [{
						cate_name: '制组交验1'
					}, {
						cate_name: '制组交验2'
					}, {
						cate_name: '制组交验3'
					},
					// {cate_name: '制组交验4'},
					// {cate_name: '制组交验5'},{cate_name: '制组交验6'},
					{
						cate_name: '缓存线'
					},
				], //tab轮播
				current: 0, //默认显示第一个
				indexNum: 0, //默认显示第一内容
				listText: [
				], //下面的内容
				serchDataLeft: [], //模态框数据
				showSearchLeft: false, //控制弹出层
				keywordLeft: '', //输入框的值
				blueDatafirst: [], //腾空一
				blueDatasecond: [], //腾空二
				blueDatathird: [], //腾空三
				blueDatafour:[],//腾空四
				listRightFirst: [], //渲染第一个数据
				listRightSecond: [], //渲染第二个数据
				listRightThird: [], //渲染第三个数据
				listRightFourth: [], //渲染第四个数据
				listRightFifth: [], //渲染第五个数据
				listRightSixth: [], //渲染第六个数据
				listRightSeventh: [], //渲染第七个数据
				lines:[],
			};
		},
		created() {
			ProcessBrakeAssemblyApi.dividedTrainPlanList().then(res => {
				console.log(res);
				this.rotatmain=false
				this.listRightFirst = res.data['制组交验1']
				this.listRightSecond = res.data['制组交验2']
				this.listRightThird = res.data['制组交验3']
			})
		},
		mounted() {
			this.init()
		},
		methods: {


			change(index) {
				this.current = index;
				this.indexNum = index; //默认显示第几个tab的内容
				console.log(index);
			},
			showSerachLeft() {
				this.showSearchLeft = true
				// console.log(111);
				ProcessBrakeAssemblyApi.dividedTrainPlanUndividedList().then(res => {
					this.rotatLeft = false
					console.log(res);
					res.data.forEach((item, index) => {
						let add = item.trainNo + "(" + item.trainModel.code + ")"
						this.serchDataLeft.push({
							num: add,
							show: false,
							hasCarBogie: item.hasCarBogie,
							id: item.id
						})
					})
				})
			},
			init() {
				const requests = [
					ProcessBrakeAssemblyApi.cacheLineList(),
					ProcessBrakeAssemblyApi.lineList()
				];

				axios.all(requests).then(axios.spread((res1, res2) => {
					const data = [];
					if (Array.isArray(res1.data)) {
						res1.data.forEach(item => {
							data.push({
								...item,
								trains: []
							});
						});
					} else {
						data.push({
							...res1.data,
							trains: []
						});
					}
					res2.data.forEach(item => {
						data.push({
							...item,
							trains: []
						});
					});
					this.lines = data;
					console.log(this.lines);
				}));
			},

			onNavigationBarButtonTap(e) {
				if (e.index == 0) {
					// console.log(111);
					// console.log(this.blueDatafirst);
					const notEmptyLines = this.lines.filter(t => t.trains.length > 0);
					let objone = {
						line:{id:this.lines[1].id},
						plans:[]
					}
					this.blueDatafirst.forEach((item,index)=>{
						objone.plans.push({id:item.id})
					})
					let objtwo = {
						line:{id:this.lines[2].id},
						plans:[]
					}
					this.blueDatasecond.forEach((item,index)=>{
						objtwo.plans.push({id:item.id})
					})
					let objthree = {
						line:{id:this.lines[3].id},
						plans:[]
					}
					this.blueDatathird.forEach((item,index)=>{
						objthree.plans.push({id:item.id})
					})
					let objfour = {
						line:{id:this.lines[0].id},
						plans:[]
					}
					this.blueDatafour.forEach((item,index)=>{
						objfour.plans.push({id:item.id})
					})
					notEmptyLines.push(...[objone,objtwo,objthree,objfour])
					
					console.log(notEmptyLines);
					if (this.blueDatafirst.length <=0 &&this.blueDatasecond.length <= 0&&this.blueDatathird.length <= 0&&this.blueDatafour.length <= 0) {
						uni.showToast({
							title:"暂无分车车辆",
							icon:"error"
						})
						return;
					}

					this.loading = true;
					const data = [];
					console.log(notEmptyLines);
					// notEmptyLines.forEach(line => {
					// 	data.push({
					// 		line: {
					// 			id: line.id
					// 		},
					// 		plans: line.trains.map(item => {
					// 			return {
					// 				id: item.id
					// 			};
					// 		})
					// 	});
					// });
					console.log(data);
					ProcessBrakeAssemblyApi.divideTrainSave({presets: notEmptyLines}).then(res=>{
						console.log(res);
						if(res.msg=="请求成功")
						uni.showToast({
							title:"操作成功"
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/brakeAssembly/brakeAssembly"
							})
						},600)
					})
				}
			},
			changeBlue(item, index) {
				if(this.indexNum==0) {
					item.show = !item.show
					console.log(item);
					console.log(index);
					if (item.show == true) {
						this.blueDatafirst.push({
							// num: item.num,
							// line:this.lines[3].id,
							id:item.id
						})
					}
					if (item.show == false) {
						let index = this.blueDatafirst.findIndex((value, index) => {
							return value.id == item.id;
						})
						this.blueDatafirst.splice(index, 1)
					}
					console.log(this.blueDatafirst);
				}
				if(this.indexNum==1) {
					item.show = !item.show
					if (item.show == true) {
						this.blueDatasecond.push({
							id:item.id
						})
					}
					if (item.show == false) {
						let index = this.blueDatasecond.findIndex((value, index) => {
							return value.id == item.id;
						})
						this.blueDatasecond.splice(index, 1)
					}
				}
				if(this.indexNum==2) {
					item.show = !item.show
					
					if (item.show == true) {
						this.blueDatathird.push({
							id:item.id
						})
					}
					if (item.show == false) {
						let index = this.blueDatathird.findIndex((value, index) => {
							return value.id == item.id;
						})
						this.blueDatathird.splice(index, 1)
					}
				}
				if(this.indexNum==3) {
					item.show = !item.show
					if (item.show == true) {
						this.blueDatafour.push({
							id:item.id
						})
					}
					if (item.show == false) {
						let index = this.blueDatafour.findIndex((value, index) => {
							return value.id == item.id;
						})
						this.blueDatafour.splice(index, 1)
					}
				}

			},
			search() {
				return this.serchDataLeft.filter(item => item.num.includes(this.keywordLeft))
			},
			goMain() {
				this.showSearchLeft = false
				if (this.indexNum == 0) {
					// this.listRightFirst.push(...this.blueDatafirst)
				} else if (this.indexNum == 1) {
					// this.listRightSecond.push(...this.blueDatafirst)
				} else if (this.indexNum == 2) {
					// this.listRightThird.push(...this.blueDatafirst)
				} else if (this.indexNum == 3) {
					// this.listRightFourth.push(...this.blueDatafirst)
				} else if (this.indexNum == 4) {
					// this.listRightFifth.push(...this.blueDatafirst)
				} else if (this.indexNum == 5) {
					// this.listRightSixth.push(...this.blueDatafirst)
				} else if (this.indexNum == 6) {
					// this.listRightSeventh.push(...this.blueDatafirst)
				}

				// let set = new Set (this.listLeft);
				// console.log(set);
				// this.listLeft = Array.from(set)
				let newArr = []
				this.serchDataLeft.forEach((item, index) => {
					if (item.show == false) {
						newArr.push(item);
					}
				})
				this.serchDataLeft = newArr;
				// console.log(newArr);
				// this.blueDatafirst = [];

			},
			//删除
			delFirst(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightFirst.forEach((value, index) => {
								if (value.id == item.id) {
									uni.showToast({
										title:"操作成功"
									})
									this.listRightFirst.splice(index, 1)
								}
								// console.log(value);
							})
							// this.listRightFirst.splice(index, 1)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delSecond(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightSecond.forEach((value, index) => {
								if (value.id == item.id) {
									uni.showToast({
										title:"操作成功"
									})
									this.listRightSecond.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delThird(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightThird.forEach((value, index) => {
								if (value.id == item.id) {
									uni.showToast({
										title:"操作成功"
									})
									this.listRightThird.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delFourth(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightFourth.forEach((value, index) => {
								if (value.num == item.num) {
									this.listRightFourth.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delFifth(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightFifth.forEach((value, index) => {
								if (value.num == item.num) {
									this.listRightFifth.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delSixth(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightSixth.forEach((value, index) => {
								if (value.num == item.num) {
									this.listRightSixth.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
			delSeventh(item) {
				console.log(item);
				uni.showModal({
					title: "确认删除吗",
					success: (res) => {
						if (res.confirm) {
							this.listRightSeventh.forEach((value, index) => {
								if (value.num == item.num) {
									this.listRightSeventh.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},

		}
	}
</script>

<style lang="scss" scoped>
	.weight {
		font-weight: 700;
	}

	.main {
		// width: 100%;
		// height: 1000rpx;
		height: calc(100vh - 280rpx);
		overflow: scroll;
		background-color: #efefef;
		padding-top: 20rpx;
	}

	.main-box {
		background-color: #fff;
	}


	.main-box-text {
		// width: 100%;
		// height: 100rpx;
		padding: 10rpx 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px solid #ddd;
	}

	.text-train {
		width: 300rpx;
		word-wrap: break-word;
	}

	.del {
		text-align: center;
		width: 80rpx;
	}

	.west,
	.east {
		color: #AAAAAA;
		font-size: 30rpx;
		margin-left: 176rpx;
	}

	.west {
		margin-bottom: 280rpx;
		/* #ifdef APP-PLUS */
		margin-bottom: 165px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-bottom: 150px;
		/* #endif */
	}

	.line-box {
		position: absolute;
		/* #ifdef H5 */
		left: 510rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		left: 310px;
		/* #endif */
		top: 250rpx;
		/* #ifdef MP-WEIXIN */
		left: 250px;
		/* #endif */
	}

	/deep/ .u-line {
		position: absolute;
		/* #ifdef H5 */
		left: 188rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		left: 94px;
		/* #endif */
		top: 66rpx;
		/* #ifdef MP-WEIXIN */
		// left: 94px;
		border-left: 0px solid !important;
		border-left-style: none !important;
		/* #endif */
	}

	.add-ball {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		background-color: rgba(0, 121, 254, 1);
		position: absolute;
		left: 660rpx;
		top: 420rpx;
		/* #ifdef APP-PLUS */
		left: 385px;
		/* #endif */
	}

	.add {
		font-size: 30rpx;
		color: #fff;
	}


	.bottom-title {
		// width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		color: rgb(64, 158, 255);
		line-height: 100rpx;
	}

	.bottom-title>view:nth-of-type(2) {
		font-size: 30rpx;
		color: #666666;
	}

	.bottom-search-box {
		// width: 100%;
		height: 100rpx;
		// display: flex;
		// justify-content: space-around;
		padding: 0 70rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #409EFF;
		border-bottom: 1px solid black;
	}

	h4 {
		margin-left: 10rpx;
		margin-top: 10rpx;
		color: rgb(217, 0, 27);
	}

	.num-ul-left {
		overflow: hidden;
	}

	.num-li-left {
		float: left;
		width: 230rpx;
		// height: 68rpx;
		word-wrap: break-word;
		border: 1px solid;
		border-color: rgb(233, 233, 233);
		border-radius: 106rpx;
		line-height: 68rpx;
		text-align: center;
		// overflow: scroll;
		margin: 6rpx;
		/* #ifdef APP-PLUS */
		margin-left: 22px;
		/* #endif */
	}

	.ball-bule {
		border-color: rgb(64, 158, 255);
		background-color: rgb(64, 158, 255) !important;
		color: #fff;
	}

	.rotate {
		width: 100%;
		text-align: center;
	}

	.missing-bogie {
		background-color: #FFFF66;
	}
</style>
